$border: 1px solid rgba(0,0,0,.05);
$hover-bg-color-blue: #F4FBFF;

.igrid {
  width: 100%;
  height: 100%;
  position: relative;
  border: $border;
  line-height: 45px;

  &.thin-igrid {
    font-size: 12px;
    line-height: 30px;

    .grid-header > div {
      height: 30px;
    }

    .grid-body {
      top: 31px;

      .grid-row > div {
        height: 30px;
        line-height: 30px;
      }
    }
  }

  &.igrid-h-40 {
    font-size: 12px;
    line-height: 40px;

    .grid-header > div {
      height: 40px;
    }

    .grid-body {
      top: 41px;

      .grid-row > div {
        height: 40px;
      }
    }
  }

  .grid-header {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    background-color: #fafafa;
    border-bottom: $border;

    & > .stretch {
      flex: 1 1 auto;
      min-width: 100px;
    }

    .checkbox {
      text-align: center;

      input {
        vertical-align: middle;
      }
    }

    & > div {
      /* min-width: 100px; */
      /* max-width: 200px; */
      flex: 0 0 auto;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      padding: 0 8px;
      height: 45px;

      &:not(:last-child) {
        border-right: $border;
      }
    }
  }

  .grid-body {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    top: 46px;
    overflow-y: auto;

    .grid-row {
      display: flex;
      max-width: none;
      white-space: nowrap;
      align-items: center;
      border-bottom: $border;

      &.clickable {
        cursor: pointer;
      }

      & > .stretch {
        flex: 1 1 auto;
        min-width: 100px;
      }

      .checkbox {
        text-align: center;

        input {
          vertical-align: middle;
        }
      }

      & > div {
        /* min-width: 100px; */
        /* max-width: 200px; */
        flex: 0 0 auto;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 8px;
        height: 45px;
        line-height: 45px;
        &:not(:last-child) {
          border-right: $border;
        }
      }
    }

    .grid-row.active {
      background-color: #F4FBFF;
    }
  }

  .grid-footer {
    bottom: 0px;
    position: absolute;
    left: 0px;
    right: 0px;
  }
}

.igrid .grid-header > .last-child,
.igrid .grid-row > .last-child,
.igrid .grid-footer > .last-child {
  min-width: 1px;
  max-width: none;
  height: 30px;
  flex: none;
  padding: 0;
  visibility: hidden;
}